<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Terrain and Units Layer test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/require.js"></script>
        <script type="text/javascript">
require('imageloader', 'building', 'tile', 'unit', 'map', 'terrainlayer', 'unitslayer');

var init, drawUnits;

init = function () {
    var loader;
    loader = new ImageLoader();
    loader.addObserver(function (percent) {
        if (percent == 1) {
            drawUnits();
        }
    });
    loader.setPathPrefix('../');
    loader.load(BuildingsDefinition, UnitsDefinition, TilesDefinition);
};

drawUnits = function () {
    var map, layer, canvas, dimensions, x, y, tx, ty, context, i, unit,
            terrain;
    map = new Map();
    map.randomMap(100, 100);
    layer = new UnitsLayer();
    layer.setCanvas(canvas = document.getElementById('units'));
    layer.setMap(map.getMap());
    for (i = 500; i--;) {
        x = Math.floor(Math.random() * 100);
        y = Math.floor(Math.random() * 100);
        unit = new Unit(x, y, Math.floor(Math.random() * 8), 0, 0,
                'rgb(0,0,0)');
        layer.onUnitChange(unit);
    }
    layer.display(0, 0);
    terrain = new TerrainLayer();
    terrain.setCanvas(document.getElementById('terrain'));
    terrain.setMap(map.getMap());
    terrain.init();
    terrain.display(0, 0);
    context = canvas.getContext('2d');
    x = y = tx = ty = 0;
    dimensions = layer.getLayerDimensions();
    /*i = 0;
    setInterval(function () {
        if (i >= 1) {
            return;
        }
        unit.setMoveOffset(i += 0.01);
        layer.display(0, 0);
    }, 10);*/
    setInterval(function () {
        var date = new Date().getTime();
        layer.display(x, y);
        terrain.display(x, y);
        context.fillText("RenderTime: " + (new Date().getTime() - date), 9, 9);
        if ((tx == x) && (ty == y)) {
            tx = Math.floor(Math.random() * dimensions.width - 1);
            ty = Math.floor(Math.random() * dimensions.height - 1);
        }
        x += tx > x ? 1 : (tx < x ? -1 : 0);
        y += ty > y ? 1 : (ty < y ? -1 : 0);
    }, 10);
};

addEventListener('DOMContentLoaded', init, false);
        </script>
    </head>
    <body>
        <div style="height: 0px;">
        <canvas id="terrain" width="800" height="600" style="border: 1px solid black"></canvas>
        </div>
        <canvas id="units" width="800" height="600" style="border: 1px solid black"></canvas>
        <pre id="pre"></pre>
    </body>
</html>
